<template>
	<view>
		<ttBar leftIcon="icon-back" title="修改店铺" ></ttBar>
		<view class="mainCnt">
			<view class="progressBox">
				<view class="progressItem" :class="[nowStep>=1?'active':'']" @tap="editBack(1)">
					<text class="progressNum">1</text>
					<text class="progressText">填写店铺信息</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="progressItem" :class="[nowStep>=2?'active':'']">
					<text class="progressNum">2</text>
					<text class="progressText">门店资质认证</text>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
			
			<!-- 第一步 输入信息 -->
			<view class="infoBox" v-if="nowStep==1">
				<view class="row">
					<text class="infoLabel">店铺名称</text>
					<input type="text" value="" placeholder="请填写门店名称" v-model="shopDetail.name" />
				</view>
				<view class="row">
					<text class="infoLabel">店铺电话</text>
					<input type="text" value="" placeholder="请填联系方式,固话请加区号" v-model="shopDetail.phone" />
				</view>
				<view class="row">
					<text class="infoLabel">选择地区</text>
					<input type="text" value="" disabled="true" placeholder="点击选择省市区" v-model="ssq" @tap="cittSelect" />
					<text class="iconfont icon-right" @tap="cittSelect"></text>
				</view>
				<view class="row">
					<text class="infoLabel">详细地址</text>
					<input type="text" value="" placeholder="请填写门店详细地址" v-model="shopDetail.address" />
				</view>
				<view class="mapImg">
					<image :src="imgSrc"  :style="{'width':imgWidth+'px','height':imgHeight+'px'}"></image>
					<text @tap="toPage" data-url="selectLocation" :data-longlat="longAndLat">编辑定位</text>
				</view>
				<button class="nextBtn" @tap="nextStep">下一步</button>
			</view>
			
			<!-- 第二步 提交资质 -->
			<view class="typeBox" v-if="nowStep==2">
				<view class="typeInfo">
					<text class="typeTitle">资质选择</text>
					<view class="selectType">
						<text  :class="['iconfont',selectType=='1'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']" data-type="1" @tap="toggleSelectType"></text>
						<text class="typeText" style="margin-right: 60upx;" data-type="1" @tap="toggleSelectType">与商户资质一致</text>
						<text class="" :class="['iconfont',selectType=='2'?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']" data-type="0" @tap="toggleSelectType"></text>
						<text class="typeText" data-type="2" @tap="toggleSelectType">单独资质</text>
			
					</view>
				</view>
			</view>
			<!-- 企业 -->
			<view class="authBox" v-if="nowStep==2">
				<text class="authTitle">营业执照</text>
				<view class="zigeImgBox zigeImgBox1" :style="{'height':shopDetail.certi?imgBoxWidth+'px':''}" data-type="certi" @tap="selectImg">
					<view class="imgBtnbox">
						<view v-if="!shopDetail.certi" class="addBtn">
							<text class="iconfont icon-add"></text>
						</view>
						<text v-if="!shopDetail.certi" class="addText">上传营业执照</text>
					</view>
					<image v-if="shopDetail.certi" :src="shopDetail.certi" mode="aspectFit"></image>
				</view>
			
				<text class="authTitle">企业实名认证</text>
				<text class="sfzTishi">依照行业规定，平台需校验企业法人证件信息</text>
				<view class="sfzImgBox">
					<view class="sfzImgItem" data-type="cardz" @tap="selectImg">
						<view class="imgBtnbox">
							<view v-if="!shopDetail.cardz" class="addBtn">
								<text class="iconfont icon-add"></text>
							</view>
							<text v-if="!shopDetail.cardz" class="addText">法人身份证人像面</text>
						</view>
						<image v-if="shopDetail.cardz" :src="shopDetail.cardz" mode="aspectFit"></image>
					</view>
					<view class="sfzImgItem" data-type="cardf" @tap="selectImg">
						<view class="imgBtnbox">
							<view v-if="!shopDetail.cardf" class="addBtn">
								<text class="iconfont icon-add"></text>
							</view>
							<text v-if="!shopDetail.cardf" class="addText">法人身份证国徽面</text>
						</view>
						<image v-if="shopDetail.cardf" :src="shopDetail.cardf" mode="aspectFit"></image>
					</view>
					
				</view>
				<view class="infoBox">
					<view class="row">
						<text class="infoLabel">企 业 法 人</text>
						<input type="text" value="" placeholder="请填写法人姓名" v-model="shopDetail.realname" />
					</view>
					<view class="row">
						<text class="infoLabel">法人身份证</text>
						<input type="text" value="" placeholder="请填写法人身份证号码" v-model="shopDetail.cardNo" />
					</view>
				</view>
				<button class="nextBtn" @tap="postShop">提交审核</button>
			</view>
			
			
		</view>
		
		
		<w-picker mode="region" :defaultVal="pkDefault" :hideArea="false" @confirm="onConfirm" ref="region"></w-picker>
		<poup ref="poup"></poup>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import wPicker from "@/components/w-picker/w-picker.vue";
	import COMM from "@/common/common.js";
	import API from "@/common/api.js";
	import poup from "@/components/poup/poup.vue";
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			wPicker,
			poup,
			avatar
		},
		computed:{
			...mapState({
				shopDetail:state=>state.shop.shopDetail,
				settledInfo:state=>state.settled.settledProgress,
				userInfo:state=>state.user.userInfo,
				
			})
		},
		data() {
			return {
				nowStep:1,
				ssq: '', 		//省市区
				longAndLat: '118.794139,32.040649', //坐标
				pkDefault: [], //定位地址,
				imgSrc: '', //定位静态图片,
				imgWidth: uni.getSystemInfoSync().screenWidth - uni.upx2px(76),
				imgHeight: parseInt((uni.getSystemInfoSync().screenWidth - uni.upx2px(76)) * 0.5),
				imgBoxWidth: uni.getSystemInfoSync().screenWidth - uni.upx2px(98),
				selectType:'1',			//1与商户资质一致  2独立资质
			};
		},
		methods: {
			// 修改回退
			editBack(e){
				this.nowStep=e
			},
			// 选择图片
			selectImg(e) {
				let _type=e.currentTarget.dataset.type;
				let _this=this;
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						uni.showLoading({
							title:'图片上传中'
						})
						API.uploadSingleImg(res.tempFilePaths[0],'file').then(res=>{
							uni.hideLoading();
							_this.shopDetail[_type]=res.data.data.url
						})
				    }
				});
			},
			// 切换资质选择
			toggleSelectType(e){
				this.selectType=e.currentTarget.dataset.type
			},
			cittSelect() {
				this.$refs.region.show()
			},
			onConfirm(e) {
				this.ssq = e.result
				this.shopDetail.areaId=e.checkValue[2]
			},
			nextStep() {
				if (!this.shopDetail.name) {
					uni.showToast({
						title: '请输入门店名称',
						icon: 'none'
					});
				} else  if (!this.shopDetail.phone) {
					uni.showToast({
						title: '请输入店铺联系方式',
						icon: 'none'
					});
				} else if (!this.ssq) {
					uni.showToast({
						title: '请选择地区',
						icon: 'none'
					});
				} else if (!this.shopDetail.address) {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none'
					});
				} else {
					this.nowStep=2
				}
			},
			
			// 根据经纬度 获取地图图片
			getMapImg() {
				this.imgSrc=API.getMapImg(this.longAndLat, this.imgWidth + '*' + this.imgHeight)
			},
			// 添加店铺
			postShop() {
				let sfReg=/^\d{17}(\d|X|x)$/;
				let _this=this;
				if (!this.shopDetail.certi) {
					uni.showToast({
						title: '请选择营业执照',
						icon: 'none'
					});
				} else if (!this.shopDetail.cardz) {
					uni.showToast({
						title: '请选择法人身份证正面照',
						icon: 'none'
					});
				}else if (!this.shopDetail.cardf) {
					uni.showToast({
						title: '请选择法人身份证反面照',
						icon: 'none'
					});
				} else if (!this.shopDetail.realname) {
					uni.showToast({
						title: '请输入法人姓名',
						icon: 'none'
					});
				} else if (!this.shopDetail.cardNo) {
					uni.showToast({
						title: '请输入人身份号码',
						icon: 'none'
					});
				} else if(!sfReg.test(this.shopDetail.cardNo)) {
					uni.showToast({
						title: '请输入正确的18位身份证号码',
						icon: 'none'
					});
				}else {
					let _data=this.shopDetail;
					delete _data.status
					delete _data.score
					delete _data.resList
					delete _data.refuseMsg
					delete _data.serverScore
					delete _data.teachScore
					delete _data.teacherList
					_data.userId=this.userInfo.userId
					this.$store.dispatch("addShop",_data).then(res=>{
						this.$store.dispatch("getShopListByUid",this.userInfo.userId);
						uni.showToast({
							title: '修改店铺成功,请耐心等待审核',
							icon: 'none'
						});
						setTimeout(()=>{
							uni.navigateBack({delta: 2})
						},1000)
					})
					
				}
			},
		},
		watch:{
			selectType(newType){
				if(newType=='1'){
					this.shopDetail.realname=this.settledInfo.realname;
					this.shopDetail.cardNo=this.settledInfo.cardNo;
					this.shopDetail.certi=this.settledInfo.certi;
					this.shopDetail.cardz=this.settledInfo.cardz;
					this.shopDetail.cardf=this.settledInfo.cardf
				}else{
					this.shopDetail.realname='';
					this.shopDetail.cardNo='';
					this.shopDetail.certi='';
					this.shopDetail.cardz='';
					this.shopDetail.cardf=''
				}
			}
		},
		onLoad(cfm) {
			this.longAndLat=this.shopDetail.longi+ ',' + this.shopDetail.lati;
			this.getMapImg()
			API.getFujinByLongAndLat(this.longAndLat).then(mpRes=>{
				this.pkDefault[0]=mpRes.data.regeocode.addressComponent.province
				this.pkDefault[1]=mpRes.data.regeocode.addressComponent.city
				this.pkDefault[2]=mpRes.data.regeocode.addressComponent.district
				this.ssq=this.pkDefault.join("")
			})
			
			uni.$on("init",res=>{
				console.log(res.tapRow);
				this.pkDefault=res.ssq
				this.ssq = res.ssq.join('');
				this.shopDetail.address = res.tapRow.name;
				this.longAndLat=res.tapRow.location
				this.shopDetail.longi=res.longi;
				this.shopDetail.lati=res.lati;
				this.shopDetail.areaId=res.areaId;
				this.getMapImg()
			})
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.longAndLat=this.shopDetail.longi+ ',' + this.shopDetail.lati;
				this.getMapImg()
				API.getFujinByLongAndLat(this.longAndLat).then(mpRes=>{
					this.pkDefault[0]=mpRes.data.regeocode.addressComponent.province
					this.pkDefault[1]=mpRes.data.regeocode.addressComponent.city
					this.pkDefault[2]=mpRes.data.regeocode.addressComponent.district
					this.ssq=this.pkDefault.join("")
				})
				uni.stopPullDownRefresh();
			}, 1500)
		}

	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.mainCnt {
		padding-top: 22upx;
	}

	.progressBox {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 30px 10upx;
		justify-content: space-around;

		.progressItem {
			display: flex;
			align-items: center;

			.progressNum {
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				text-align: center;
				line-height: 40upx;
				background-color: #a0a0aa;
				flex-shrink: 0;
				flex-grow: 0;
				font-size: 26upx;
				font-weight: bold;
				color: #ffffff;
				margin-right: 5upx;
			}

			.progressText {
				font-size: 24rpx;
				font-weight: bold;
				color: #07080d;
			}
		}

		.active {
			.progressNum {
				background-color: #ffb423;
				color: #07080d;
			}
		}
	}

	.typeBox {
		margin-top: 22upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 20px 45upx;
	
		.typeInfo {
			display: flex;
			flex-direction: column;
			flex: 1;
	
			.typeTitle {
				font-size: 35rpx;
				font-weight: bold;
				color: #07080d;
				margin-bottom: 20upx;
			}
	
			.selectType {
	
				display: flex;
				align-items: center;
				font-size: 28upx;
	
				.iconfont {
					font-size: 40upx;
					margin-right: 10upx;
				}
	
				.icon-yuanxingxuanzhongfill {
					color: #ffb423;
				}
			}
		}
	
		.editWords {
			font-size: 32rpx;
			color: #a0a0aa;
		}
	
	
	}
	
	.infoBox {
		margin-top: 22upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 0 15upx;
	
		.row {
			display: flex;
			width: 100%;
			border-bottom: 1px solid #e7e7e7;
			padding: 55upx 32upx 27upx 32upx;
			align-items: center;
	
			.infoLabel {
				font-size: 30rpx;
				color: #07080d;
				margin-right: 64upx;
	
			}
	
			input {
				font-size: 30upx;
				flex-grow: 1;
				width: 350upx;
				flex: 1;
			}
	
			.iconfont {
				font-size: 28upx;
				color: #07080d;
			}
	
	
		}
	
		.mapImg {
			margin-top: 20upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
	
			>text {
				display: inline-block;
				position: absolute;
				right: 20upx;
				top: 20upx;
				font-size: 28upx;
				background-color: #FFFFFF;
				border-radius: 10upx;
				padding: 10upx 30upx;
				box-shadow: 0upx 5upx 10upx 0rpx rgba(0, 0, 0, 0.3);
			}
		}
	}
	
	.nextBtn {
		height: 88upx;
		background-color: #ffb423;
		border-radius: 44upx;
		line-height: 88upx;
		width: 80%;
		color: #FFFFFF;
		margin-top: 50upx;
		margin-bottom: 38upx;
	}
	
	.nextBtn:after {
		border: none;
	}
	
	.authBox {
		margin-top: 22upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 0upx 18upx 30upx 18upx;
	
		.authTitle {
			font-size: 35rpx;
			font-weight: bold;
			color: #07080d;
			margin-left: 27upx;
			margin-top: 30upx;
		}
	
		.zigeImgBox {
			margin-top: 34upx;
			margin-bottom: 34upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			border-radius: 21rpx;
			border: dashed 2rpx #ffb423;
			background-color: #fef8e3;
			position: relative;
			height: 208upx;
			overflow: hidden;
	
			.imgBtnbox {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				z-index: 2;
			}
	
			.addBtn {
				width: 84upx;
				height: 84upx;
				text-align: center;
				border-radius: 50%;
				background-color: #ffb423;
				line-height: 84upx;
				margin-top: 33upx;
				margin-bottom: 20upx;
				position: relative;
				z-index: 2;
	
				.iconfont {
					font-size: 60upx;
					font-weight: bold;
					color: #07080d;
				}
			}
	
			.addText {
				font-size: 32rpx;
				color: #f49b0e;
				margin-bottom: 38upx;
				position: relative;
				z-index: 2;
			}
	
			image {
				height: 100%;
				position: relative;
				z-index: 1;
				flex-shrink: 0;
			}
		}
	
		.zigeImgBox1 {
			margin-bottom: 0upx;
		}
	
		.sfzTishi {
			font-size: 24rpx;
			color: #848488;
			margin-left: 27upx;
			margin-top: 12upx;
			margin-bottom: 22upx;
		}
	
		.sfzImgBox {
			display: flex;
			justify-content: space-between;
	
			.sfzImgItem {
				position: relative;
				width: 315upx;
				height: 204upx;
				border-radius: 20upx;
				background-image: url('~@/static/sfzzm.png');
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-grow: 0;
				flex-shrink: 0;
				overflow: hidden;
			}
	
			.sfzImgItem:last-child {
				background-image: url('~@/static/sfzbm.png');
			}
	
			.imgBtnbox {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				z-index: 2;
			}
	
			.addBtn {
				width: 84upx;
				height: 84upx;
				text-align: center;
				border-radius: 50%;
				background-color: #ffb423;
				line-height: 84upx;
				margin-top: 33upx;
				margin-bottom: 20upx;
				position: relative;
				z-index: 2;
	
				.iconfont {
					font-size: 60upx;
					font-weight: bold;
					color: #07080d;
				}
			}
	
			.addText {
				font-size: 32rpx;
				color: #f49b0e;
				margin-bottom: 38upx;
				position: relative;
				z-index: 2;
			}
	
			image {
				width: 100%;
				position: relative;
				z-index: 1;
				flex-shrink: 0;
			}
		}
	}
	.nextBtn {
		height: 88upx;
		background-color: #ffb423;
		border-radius: 44upx;
		line-height: 88upx;
		width: 80%;
		color: #FFFFFF;
		margin-top: 50upx;
		margin-bottom: 38upx;
	}

	.nextBtn:after {
		border: none;
	}
</style>
